<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>各种元素水平居中总结</title>
    <style>
      /* 
      一.各种元素的居中
      1.1 普通文本：text-align:center
      1.2 行内元素居中：text-align:center
      1.3 行内替换元素：text-align:center
      1.4 行内块级元素：text-align:center
      1.5 块级元素：margin:0 auto;
       */
      .content {
        height: 300px;
        background-color: pink;
        text-align: center;
      }

      span {
        background-color: yellowgreen;
      }

      .ib {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: green;
      }

      .div {
        /* 
        1.如果没有设置宽度的话：块级元素本来宽度就是父级元素的宽度，
          所以text-align:center无效，只会让其中元素继承
        2.设置宽度的话：margin:0 auto;
         */
        width: 100px;
        background-color: blue;
        margin: 0 auto;
      }
    </style>
  </head>

  <body>
    <div class="content">
      <!-- <span>hello,world!</span> -->
      <!-- <strong>strong元素</strong> -->
      <!-- <img src="../img/1.jpg" alt="" width="100">  -->
      <!-- <span class="ib">我是inline-block</span> -->
      <div class="div">div元素</div>
    </div>
  </body>

</html>